// Copyright 2017 The Kubernetes Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import './../variables';

$root-font-size: 16px;

@function px2rem($px){
  @return ($px / $root-font-size) * 1rem;
}

kd-login {
  position: absolute;
  z-index: 99;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
}

.kd-login-card {
  margin: auto;
  min-width: px2rem(480px);
  min-height: px2rem(538px);
}

.login-title{
  vertical-align:middle;
  text-align: center;
  img{
    width: px2rem(256px);
    height: px2rem(110px);
  }
}

.login-panel{
	padding: 10px;
  background-color: rgba(17,17,17,0.2);
  border-radius: px2rem(4px);

  .login-container{
    padding: px2rem(48px) px2rem(40px);
    background: url('../../assets/images/bg.png') no-repeat;
    background-size: cover;
    border-radius: px2rem(4px);;

    h2{
      padding: 0;
      margin: 0 0 px2rem(20px) 0;
      font-family: 'MicrosoftYaHei', Arial, Helvetica, sans-serif;
      font-size: px2rem(24px);;
      color: #fff;
    }

    .form-control{
      position: relative;
      width: 100%;
      color: #fff;
      font-size: px2rem(14px);
      font-family: 'PingFangSC-Regular', Arial, Helvetica, sans-serif;

      .input-group{
        position: relative;
        margin-bottom: px2rem(12px);

        input{
          padding: px2rem(13px) 0;
          padding-left: 40px;
          width: calc(100% - 40px);
          height: px2rem(20px);
          line-height: px2rem(20px);
          border: none;
          font-size: px2rem(16px);
          color: #222;
          background: #fff;
          border-radius: px2rem(3px);
          font-family: 'MicrosoftYaHei', Arial, Helvetica, sans-serif;
        }
      }

      .btn-login{
        padding: px2rem(10px) px2rem(5px);
        width: 100%;
        color: #fff;
        font-size: px2rem(20px);
        font-family: 'PingFangSC-Regular', Arial, Helvetica, sans-serif;
        background: #3d59f7;
        border: none;
        border-radius: px2rem(5px);
        &:hover{
          background:#206af1;
        }
      }

      .login-remember{
        padding: px2rem(6px) 0;
        margin-bottom: px2rem(40px);
        height: px2rem(18px);
        line-height: px2rem(18px);

        .remember-id{
          position: relative;
          float: left;
          vertical-align: middle;

          .remember-txt{
            display: inline-block;
            position: absolute;
            top: px2rem(3px);
            left: px2rem(25px);
            width: px2rem(65px);
            cursor: pointer;
          }
        }
      }

      .clearFix:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

      .forget-pwd{
        float: right;
        color: #0889f8;
      }

      .login-mode {
        position: relative;
        margin-top: px2rem(18px);
        text-align: left;
        height: px2rem(32px);
        line-height: px2rem(32px);

        a{
          margin-left: px2rem(5px);
          color: #0a7de1;
          font-size: inherit;
          font-family: inherit;
        }
      }
    }
  }
}

.icon-login {
	background: url(../../assets/images/login-svg-sprite.svg) no-repeat;
}

[class^=icon] {
  position: absolute;
  top: px2rem(14px);
  left: px2rem(10px);
  display: inline-block;
  vertical-align: middle;
}

.icon-login-name {
	width: 18.94px;
  height: 19px;
  background-position: -45px -2px;
}

.icon-login-pwd {
	width: 17px;
  height: 19px;
  background-position: -65px -2px;
}
.icon-login-checkbox{
  top: 0;
  left: 0;
  width: px2rem(22px);
  height: px2rem(22px);
  background-position: 0 0;
  cursor: pointer;
}
.icon-login-checkbox-checked{
  top: 0;
  left: 0;
  width: px2rem(22px);
  height: px2rem(22px);
  background-position: -22px 0;
  cursor: pointer;
}
